<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="h45" style="background-color: white;">
				<view class="search-ctrl">
					<view class="search-bar">
						<view class="iconfont f-s34">&#xe663;</view>
						<input type="text" confirm-type="search" v-model="params.keyword" class="sc-inp"
							placeholder="输入设备地址/设备编号" @input="search" />
					</view>
				</view>
				<!-- <view class="fix-wrap">
					<view class="h45 search-bar">
						<view class="search-form">
							<view class="icon sc-icon iconfont icon-sousuo">&#xe61e;</view>
							<input type="text" v-model="params.keyword" class="sc-inp" placeholder="输入关键词搜索" @input="search">
							<view v-if="keyword" class="icon clear-btn iconfont icon-shanchu" @click="clearKeyword"></view>
						</view>
					</view>
				</view> -->
			</view>
			<view class="body">
				<view class="list-wrap">

					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>

					<template v-else>
						<template v-if="list.length>0">
							<!-- <navigator :url="'/package_zhinengjiance/dataDetail/dataDetail?id='+item.id" hover-class="none" class="item" v-for="(item,index) in list" :key="index"> -->
							<view class="item" v-for="(item,index) in list" :key="item.id" @click="goDataDetail(item)">
								<view class="pic">
									<image :src="'http://test3.agri120.org/image/compress.html?from=zncp&path='+item.photo_path+'&ftype=2'" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="name" v-if="item.device_number">设备编号:{{item.device_number}}</view>
									<view class="params">
										<!-- <view class="text">{{item.address}}</view> -->
										<view class="text">{{item.photo_date}}</view>
									</view>
								</view>
							</view>
							<!-- </navigator> -->

							<loading :loadingState="loadingState"></loading>
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>

					</template>


				</view>
			</view>

			<!-- 底部 -->
			<!-- <view class="footer">
			<view class="fix-wrap bottom">
				<navigator open-type="navigate" hover-class="none" url="/package_yundiaocha/form/form" class="form-lay-btn">继续作业</navigator>
			</view>
		</view> -->
		</template>

	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import { HTTP_REQUEST_URL } from '@/config.js'
	import { img_path } from "@/config.js"
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'),
				loadingState: {
					default: true,
					loading: false,
					compelted: false
				},
				list: [],
				params: {
					// dataRange: '',
					// province: '',
					// city: '',
					// district: '',
					// town: '',
					// village: '',
					// beginTime: '',
					// endTime: '',
					page: 1,
					limit: 10,
					keyword:'',
					token: uni.getStorageSync('token'),
					appid: getApp().globalData.appid,
					user_id:''
				},
				page: 1,
				total: 0,
				keyword: '',
				http_request_url: HTTP_REQUEST_URL
			}
		},
		onShow() {
			// console.log(img_path+'/2023-04-14/RF2088_K09524478_20230412092157541_ALARM_INPUT.jpg'+'?ftype=2');
		},
		onReachBottom() {
			if (this.loadingState.completed) {
				this.page = 1;
				return false
			} else {
				if (this.list.length < this.total && this.list.length > 0) {
					this.params.page++;
					this.getPcDataList();
				}
			}
		},
		async onLoad(params) {
			if (params.params) {
				this.params = Object.assign({}, this.params,{user_id:this.userInfo.uid}, JSON.parse(params.params) ?? {});
				console.log('params', this.params);
			}

			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				// this.getEnvtype();
				this.getPcDataList();
			}

		},
		methods: {

			dataInit: function() {
				this.loadingState = {
					default: true,
					loading: false,
					compelted: false
				};
				this.list = [];
				this.total = 0;
				this.page = 1;
			},

			goDataDetail(data) {
				// if (!this.isAdmin) return
				let params = {
					id: data.id,
					scan_id: data.scan_id,
					photo_path: data.photo_path,
					toufang_users: data.toufang_users,
					photo_date: data.photo_date
				}
				uni.navigateTo({
					url: `/package_zhinengcipan/dataDetail/dataDetail?data=${encodeURIComponent(JSON.stringify(params))}`,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						update: data => {
							if (data.update == 1) {
								console.log('修改');
								this.list = [];
								this.params.page = 1;
								this.getPcDataList();
							}
						},
					},
				})
			},

			// 获取列表
			getPcDataList: async function() {
				let res = await this.$api.zncp_api.getDevPhoto(this.params)
				console.log('photo', res);
				if (res.data.ret == 1) {
					this.loadingState.default = false;
					this.loadingState.loading = true;
					this.total = res.data.data.count;
					this.list = this.list.concat(res.data.data.list);
					if (this.list.length == this.total) {
						this.loadingState.loading = false;
						this.loadingState.completed = true;
					}
				} else {
					this.loadingState.default = false;
				}

			},

			// 清空搜索词
			clearKeyword: function() {
				this.keyword = '';
				this.dataInit();
				this.getPcDataList();
			},


			// 搜索
			search: function() {
				this.dataInit();
				this.getPcDataList();
			},
		},
		computed: {
			list_update() {
				return this.$store.state.diaochaListUpdate
			}
		},
		watch: {
			list_update(newer, older) {
				if (newer != older) {
					this.loadingState = {
						default: true,
						loading: false,
						compelted: false
					};
					this.list = [];
					this.getPcDataList();
				}
			}
		},
		components: {
			loading,
			empty
		}
	}
</script>

<style scoped lang="less">
	.list-wrap {
		padding-top: 20rpx;

		.item {
			display: flex;
			padding: 20rpx;
			margin-bottom: 20rpx;
			background: #fff;

			.pic {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30%;
				max-height: 200rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.info {
				flex-grow: 2;

				.name {
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}

				.params {
					font-size: 30rpx;
					color: #999;

					.text {
						margin-bottom: 8rpx;
					}
				}
			}
		}
	}

	.add-yj-btn {
		width: 96%;
		height: 80rpx;
		margin: 10rpx auto;
		background: #f00;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
	}
</style>